<template>
  <div class="content-wrapper">
    <section class="content-header">
      <h1>
        {{menuList[0]}}
        <small v-if="menuList[1]" class="title-small">>{{menuList[1]}}</small>
      </h1>
    </section>
    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-xs-12">
          <div class="box box-primary">
              <div class="box-header">
                <form  class="form-horizontal clearfix row table-form"  role = "form" ref="query">
                    <div v-for="(item,index) in queryConfigs" class="col-md-4">
                      <v-text :text="item" v-if="item.type===1"></v-text>
                      <v-date-range-picker v-if="item.type===3||item.type===2" :item="item" :initDateRange="initDateRange" ></v-date-range-picker>
                      <!--<v-date-range-picker v-if="item.type===3||item.type===2" :item="item" :initDateRange="initDateRange" ></v-date-range-picker>-->
                      <v-select :item="item.options" :name1="item.name1" :label="item.label" v-on:onchange="onchangeSelect" v-else-if="item.type===4" ></v-select>
                    </div>
                </form>
                <div class="col-md-12 btn-box">
                  <button class="btn btn-primary btn-sm" @click.prevent="submitParams">
                    查询
                  </button>
                  <button class="btn btn-primary btn-sm" @click.prevent="tableExport">
                    导出
                  </button>
                </div>
            </div>

            <div class="box-body" ref="queryTable">
              <v-table  :item="tableItem"  :ref="tableItem.ref" ></v-table>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!--模态窗口 -->
    <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">导出excel</h4>
          </div>
          <div class="modal-body modal-li">
            <form>
              <ul class="form-group">
                <li style="margin-bottom: 10px;">
                  <h5>导出内容：</h5>
                  <label class="checkbox-inline" style="margin-left: 10px;">
                    <input type="checkbox"  v-model='checkedAllModel' @click='checkedAll'>全选
                  </label>
                  <label class="checkbox-inline" v-for='item in detailConfigs'>
                    <input type="checkbox" name='checkboxinput' :value="item.field" v-model='checked'>{{item.name}}
                  </label>
                </li>
                <li>
                  <h5>导出范围：</h5>
                  <label class="radio-inline">
                    <input type="radio" name="inlineRadioOptions" v-model="picked" value="999999999" >全部
                  </label>
                  <label class="radio-inline">
                    <input type="radio" name="inlineRadioOptions"  v-model="picked" :value="modelParams.pageNum" > 当前页
                  </label>
                </li>
              </ul>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary"  @click="submit()">确定</button>
          </div>
        </div>
      </div>
    </div>
    <!--end-模态窗口 -->
  </div>
</template>
<script>
  import axios from 'src/components/util/axios';
  import { apiUrl } from 'src/components/config.js'
  import vText from 'src/components/form/FormText';
  import vSelect from 'src/components/form/FormSelect';
  import vDateRangePicker from 'src/components/form/FormDateRangePicker';
  import vDatePicker from 'src/components/form/FormDatePicker';
  import vTable from 'src/components/table/Table';
  import dateUtil from 'src/components/util/date-format';
  export default {
    data(){
      return{
        height:null,
//        show:false,
        tableItem:{
          id:'mainTable',
          ref:'tableChild'
        },
        dateRange:[],
        menuList:[],
        //导出选项
        detailConfigs:[],
        //导出复选框
        checked:[],
        //导出页
        picked:"",
//        tableBody:[
//          {
//            "id": "5",
//            "createTime": -28800000,
//            "name": "xx5",
//            "picUrl": "http://img.11zhushou.com/bank/lyyh.jpg"
//          },
//          {
//            "id": "4",
//            "createTime": -28800000,
//            "name": "xx4",
//            "picUrl": "http://img.11zhushou.com/bank/lyyh.jpg"
//          },
//          {
//            "id": "3",
//            "createTime": -28800000,
//            "name": "xx3",
//            "picUrl": "http://img.11zhushou.com/bank/lyyh.jpg"
//          },
//          {
//            "id": "2",
//            "createTime": -28800000,
//            "name": "xx2",
//            "picUrl": "http://img.11zhushou.com/bank/lyyh.jpg"
//          },
//          {
//            "id": "1",
//            "createTime": -28800000,
//            "name": "xx1",
//            "picUrl": "http://img.11zhushou.com/bank/lyyh.jpg"
//          }
//        ],
        columns:[
//          {
//            "name":"id",
//            "field":"Id",
//            "isTime":0,
//            "isHidden":0,
//            "isImg":0
//          },
//          {
//            "name":"创建时间",
//            "field":"createTime",
//            "isTime":1,
//            "isHidden":0,
//            "isImg":0
//          },
//          {
//            "name":"名称",
//            "field":"name",
//            "isTime":0,
//            "isHidden":0,
//            "isImg":0
//          },
//          {
//            "name":"图片",
//            "field":"picUrl",
//            "isTime":0,
//            "isHidden":0,
//            "isImg":1
//          }
        ],
        exportCol:[],
        queryConfigs:[
//          {
//            "label":"名称名称名称名称名称",
//            "name1":"name",
//            "name2":"",
//            "options":[],
//            "type":1
//          },
//          {
//            "label":"名称2",
//            "name1":"name2",
//            "name2":"",
//            "options":[],
//            "type":1
//          },
//          {
//            "label":"名称3",
//            "name1":"name3",
//            "name2":"",
//            "options":[],
//            "type":1
//          },
//          {
//            "label":"起始时间",
//            "name1":"起始时间",
//            "name2":"",
//            "options":[],
//            "type":2
//          },
//          {
//            "label":"结束时间",
//            "name1":"",
//            "name2":"结束时间",
//            "options":[],
//            "type":2
//          },
//          {
//            "label":"范围",
//            "name1":"范围选择",
//            "name2":"",
//            "options":[
//              {
//                "text":"a",
//                "value":"1"
//              },
//              {
//                "text":"b",
//                "value":"2"
//              },
//
//            ],
//            "type":3
//          },
//          {
//            "label":"范围2",
//            "name1":"范围选择2",
//            "name2":"",
//            "options":[
//              {
//                "text":"c",
//                "value":"3"
//              },
//              {
//                "text":"d",
//                "value":"4"
//              },

//            ],
//            "type":3
//          }
        ],
        //表格查询
        params:{
          // sortOrder:'desc'
        },
        //模态框数据
        modelParams:{},
        //导出数据
        exportParams:{},
        fadeIn:false
      }
    },
    created(){
      this.initCol(this.params);
    },
    watch: {
      '$route.query.ocn': function () {
        this.params={
          sortOrder:'desc'
        };
        this.modelParams={};
        this.queryConfigs=[];
        this.initCol(this.params);
        this.$refs[`${this.tableItem.ref}`].destoryTable(this.tableItem);
      },
      'checked': {
        handler: function (val, oldVal) {
          if (this.checked.length === this.detailConfigs.length) {
            this.checkedAllModel=true;
          }else{
            this.checkedAllModel=false;
          }
        },
        deep: true
      },
    },
    methods:{
      //导出全选
      checkedAll() {
        var _this = this;
        if (this.checkedAllModel) {//实现反选
          _this.checked = [];
        }else{//实现全选
          _this.checked = [];
          _this.detailConfigs.forEach(function(item) {
            _this.checked.push(item.field);
          });
        }
      },
      submit(){
        let ocn = this.$route.query.ocn;
//        console.log("this.modelParams",this.modelParams);
        this.exportParams=Object.assign({},this.modelParams);
        this.exportParams.fields = this.checked;
        let params='';
        if(parseInt(this.picked)===999999999||!this.picked){
          this.exportParams.pageNum='';
          this.exportParams.pageSize='';
        }
        for(let i in this.exportParams){
          params+=i+'='+this.exportParams[i]+'&';
        }
        params = params.substring(0,params.length-1);
        window.open(`/api/v1/obj/${ocn}/dl?${params}`);
        $('#modal').modal('hide');
      },
      onchangeSelect(selected,name1){
        this.params[name1] = selected;
      },
      initDateRange(item,store,cb){
          cb(item,store)
      },
      initCol(outParams){
        let ocn = this.$route.query.ocn;
        let oName = this.$route.query.oName;
        if(ocn){
          axios.get('/v1/obj/'+ocn+'/config/get').then((res) => {
          this.menuList = [res.data.data.groupName,res.data.data.objName];
          this.queryConfigs =res.data.data.queryConfigs;
          this.queryConfigs.map((query)=>{
            if(query.type===4){
              let array = []
              for(let i=0;i<query.options.length;i++){
                let o = {};
                o.id = query.options[i].value;
                o.text = query.options[i].text;
                array[i] = o;
              }
              query.options.data = array
            }
          });
          if(!this.fadeIn){
            this.fadeIn = true;
            this.queryConfigs.map((query)=>{
              if(query.type===3){
              this.params[`${query.name1}`]= moment().subtract(6, 'days').format('YYYY-MM-DD 00:00:00');
              this.params[`${query.name2}`]=moment().format('YYYY-MM-DD 23:59:59');
            }
            if(query.type===2){
              this.params[`${query.name1}`]=  moment().subtract(6, 'days').format('YYYY-MM-DD HH:mm:ss');
              this.params[`${query.name2}`]=moment().format('YYYY-MM-DD HH:mm:ss');
            }
          })
          }
          this.detailConfigs = res.data.data.detailConfigs;
          if(res.data.data.listConfigs){
            this.columns = res.data.data.listConfigs;
            // format
            // 1,普通文本，
            // 2，时间精度到time，
            // 3，时间精度到天，
            // 4，textarea，
            // 5,图片小，
            // 6，图片中，
            // 7,图片大
            let col = this.columns.map(col=>{col.title = col.name;
            col.sortable = true;
            if(col.isHidden===1){
              col.visible = false;
            }
            if(col.format===2){
              outParams.sortName = col.field;
              col.formatter = function (value, row, index){
                return '<div>'+ dateUtil.format(value,'yyyy-MM-dd hh:mm:ss') + '</div>';
              }
            }
            if(col.format===3){
              outParams.sortName = col.field;
              col.formatter = function (value, row, index){
                return '<div>'+ dateUtil.format(value,'yyyy-MM-dd') + '</div>';
              }
            }
            if(col.format===5||col.format===6||col.format===7){
              col.formatter = function (value, row, index){
                return '<img style="width: 30px;" src="'+value+'">';
              }
            }
            return col
          });
            let detail = {
              "title": "操作",
              "field": "id",
              "align":"center",
              "sortable" :true,
              formatter: function (index, row) {
                return '<a href="/#/detail?id='+row.id+'&ocn='+ocn+'&oName='+oName+'" class="btn btn-primary" target="_blank">查看详情</a>';
//              return `<!--<a href=/#/detail?id=${row.id}&ocn${ocn}&oName=${oName} class="btn btn-primary" target="_blank">查看详情</a>-->`;
              }
            }
            col.push(detail);
            this.tableItem.url =  `${apiUrl}/v1/obj/${ocn}/query`;
            this.tableItem.col = col;
            let self = this;
            this.tableItem.queryParams = function (params) {
             console.log("params",params);
             console.log("outParams",outParams);
              let pa={
                "pageSize":params.limit,
                "pageNum": parseInt((params.offset) / params.limit) + 1,
                //排序
                "sortOrder":params.order,
              };
              if(!params.order){
                pa.sortOrder = outParams.sortOrder
              }
              if(!params.sort){
                pa.sort = outParams.sortName
              }
              params.sort?pa.sortName=params.sort:'';
              let datePicker = $store.state.dateRangePickder.dateParams;
              if(datePicker){
                for(let i=0;i<datePicker.length;i++){
                  for(let j in datePicker[i]){
                    pa = Object.assign(pa,datePicker[i][j]);
                  }
                }
              }
              pa= Object.assign(self.params,pa);
              self.modelParams = pa
              return pa;
            };
          }
        }).then(()=> {
            this.$refs[`${this.tableItem.ref}`].initTable(this.tableItem);
          })
        }
      },
      submitParams(){
        this.modelParams = this.params;
//        console.log("this.params",this.params);
        let self = this;
        this.tableItem.queryParams = function (params) {
          let pa={
            "pageSize":params.limit,
            "pageNum": parseInt((params.offset) / params.limit) + 1,
            //排序
            "sortOrder":params.order,
            "sort":params.sort
          };
          params.sort?pa.sortName=params.sort:''
          let datePicker = $store.state.dateRangePickder.dateParams;
          if(datePicker){
            for(let i=0;i<datePicker.length;i++){
              for(let j in datePicker[i]){
                self.params= Object.assign(self.params,datePicker[i][j]);
              }
            }
          }
          let select = [];
          for(let i=0;i<self.queryConfigs.length;i++){
            if(self.queryConfigs[i].type===1){
              let obj={};
              (self.queryConfigs[i].value&&(self.queryConfigs[i].value).trim())? obj[self.queryConfigs[i].name1]=self.queryConfigs[i].value.trim():delete self.params[self.queryConfigs[i].name1]
              self.params= Object.assign(self.params,obj);
            }
          }
          pa= Object.assign(self.params,pa);
          self.modelParams = pa;
          return pa;
        };
//        this.resize();
        this.$refs[`${this.tableItem.ref}`].initTable(this.tableItem);
      },
      tableExport(){
        this.submitParams();
        let ocn = this.$route.query.ocn;
        $('#modal').modal('show');
      }
    },
    components: {
      vText,
      vSelect,
      vDateRangePicker,
      vDatePicker,
      vTable
    },
  }
</script>
<style>
  .control-label{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0;
  }
  .title-small{
    font-size: 18px!important;
  }
  .table-form{
    padding:15px;
  }
  .btn-box{
    padding: 10px;
  }
  .content{
    padding: 0;
  }
</style>

